<template>
	<view class="album-img-item" :class="[isRead ? 'read' : '']" @tap="preview(imgUrl, userId)">
		<image class="pri-img" :src="imgUrl" mode="aspectFill"></image>
		<view class="type-icon"><view :class="[type === 'flash' ? 'icon-icon-test' : 'icon-hongbao1']" class="icon iconfont"></view></view>
		<view v-if="!isRead && type === 'flash'" class="type-msg">阅后即焚</view>
		<view v-else-if="!isRead && type === 'reward'" class="type-msg">红包照片</view>
		<view v-else-if="isRead && type === 'reward'" class="type-msg">已解锁</view>
		<view v-else class="type-msg">已焚毁</view>
	</view>
</template>

<script>
export default {
	props: {
		imgUrl: String,
		type: String,
		isRead: Boolean,
		userId: Number,
		imgId:{
			type:Number,
			default:0
		}
	},
	methods: {
		preview(imgUrl, userId) {
			if (this.type === 'destroy' && this.isRead){
				return;
			} else if(this.type === 'destroy' && !this.isRead){
				uni.navigateTo({
					url: `../album-preview/album-preview?userId=${this.userId}&imgUrl=${this.imgUrl}&type=${this.type}`
				});
			}else if(this.type === 'reward' && this.isRead){
				uni.previewImage({
					current:0,
					urls:Array.of(this.imgUrl)
				});
			}else{
				this.$emit('reward',this.imgId);
			}
			
		}
	}
};
</script>

<style lang="less" scoped>
.album-img-item {
	position: relative;
	width: 150rpx;
	height: 150rpx;
	border-radius: 20rpx;
	border: 5rpx solid #f86090;
	margin: 10rpx 5rpx;

	image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.pri-img {
		filter: blur(2px);
	}

	.type-icon {
		margin-top: -6rpx;
		margin-left: -6rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.iconfont {
		position: relative;
		width: 40rpx;
		height: 40rpx;
		color: #ffffff;
		background: linear-gradient(270deg, #feb7ba, #fc81a4);
		border-top-left-radius: 15rpx;
		border-bottom-right-radius: 20rpx;
	}
	.icon-hongbao1::before {
		position: absolute;
		font-size: 24rpx;
		line-height: 24rpx;
		margin-left: 10rpx;
		margin-top: 10rpx;
	}

	.icon-icon-test::before {
		position: absolute;
		font-size: 28rpx;
		line-height: 28rpx;
		margin-top: 5rpx;
		margin-left: 5rpx;
	}

	.type-msg {
		text-align: center;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 22rpx;
		line-height: 22rpx;
		font-weight: 700;
		color: #f86090;
	}
}
.read {
	border-color: #999999;
	.iconfont {
		background: none;
		background-color: #999999;
	}
	.type-msg {
		color: #ffffff;
	}
}
</style>
